<template>
    <div class="scroll-style">
        <div class="boxrow" v-for="rownum in rownums" :key:any="rownum + (Math.ceil(Math.random() * 100))">
            <div class="boxitem" v-for="itemindex in itemnumarr[rownum-1]" :key="rownum + '-' + itemindex">
                <div class="itemtype itemtype1" v-if="itemlists[(rownum - 1) * 3 + (itemindex - 1)] && itemlists[(rownum - 1) * 3 + (itemindex - 1)].items && itemlists[(rownum - 1) * 3 + (itemindex - 1)].items.length === 1">
                    <!-- <div class="title" :title="itemlists[(rownum - 1) * 3 + (itemindex - 1)].title">{{ itemlists[(rownum - 1) * 3 + (itemindex - 1)].title.replace(/传感器/, "") }}</div> -->
                    <div class="title" v-if="itemlists[(rownum - 1) * 3 + (itemindex - 1)].pop_type!=''" :title="itemlists[(rownum - 1) * 3 + (itemindex - 1)].title"><a href="javascript:;" @click="showPop(parseInt(itemlists[(rownum - 1) * 3 + (itemindex - 1)].pop_type),itemlists[(rownum - 1) * 3 + (itemindex - 1)].id)">{{ itemlists[(rownum - 1) * 3 + (itemindex - 1)].title.replace(/传感器/, "") }}</a></div>
                    <div class="title" v-else :title="itemlists[(rownum - 1) * 3 + (itemindex - 1)].title">{{ itemlists[(rownum - 1) * 3 + (itemindex - 1)].title.replace(/传感器/, "") }}</div>

                    <div class="rowline">
                        <span class="iteminfo row">
                            <span v-if="itemlists[(rownum - 1) * 3 + (itemindex - 1)].items[0].item!=itemlists[(rownum - 1) * 3 + (itemindex - 1)].title" class="prefix">{{ itemlists[(rownum - 1) * 3 + (itemindex - 1)].items[0].item }}&nbsp;</span>
                            <span class="value" :title="itemlists[(rownum - 1) * 3 + (itemindex - 1)].items[0].value">{{ itemlists[(rownum - 1) * 3 + (itemindex - 1)].items[0].value }}</span>
                            <span class="unit" v-if="itemlists[(rownum - 1) * 3 + (itemindex - 1)].items[0].unit">
                                {{ itemlists[(rownum - 1) * 3 + (itemindex - 1)].items[0].unit }}
                            </span>
                        </span>
                    </div>
                </div>
                <div class="itemtype itemtype2" v-if="itemlists[(rownum - 1) * 3 + (itemindex - 1)] && itemlists[(rownum - 1) * 3 + (itemindex - 1)].items && itemlists[(rownum - 1) * 3 + (itemindex - 1)].items.length === 2">
                    <div class="title" v-if="itemlists[(rownum - 1) * 3 + (itemindex - 1)].pop_type!=''" :title="itemlists[(rownum - 1) * 3 + (itemindex - 1)].title"><a href="javascript:;" @click="showPop(parseInt(itemlists[(rownum - 1) * 3 + (itemindex - 1)].pop_type),itemlists[(rownum - 1) * 3 + (itemindex - 1)].id)">{{ itemlists[(rownum - 1) * 3 + (itemindex - 1)].title.replace(/传感器/, "") }}</a></div>
                    <div class="title" v-else :title="itemlists[(rownum - 1) * 3 + (itemindex - 1)].title">{{ itemlists[(rownum - 1) * 3 + (itemindex - 1)].title.replace(/传感器/, "") }}</div>

                    <div class="rowline line1">
                        <div class="itemt">{{ itemlists[(rownum - 1) * 3 + (itemindex - 1)].items[0].item }}</div>
                        <div class="iteminfo">
                            <div class="value">{{ itemlists[(rownum - 1) * 3 + (itemindex - 1)].items[0].value }}</div>
                            <div class="unit" v-if="itemlists[(rownum - 1) * 3 + (itemindex - 1)].items[0].unit">{{ itemlists[(rownum - 1) * 3 + (itemindex - 1)].items[0].unit }}</div>
                        </div>
                    </div>

                    <div class="rowline line2">
                        <div class="itemt">{{ itemlists[(rownum - 1) * 3 + (itemindex - 1)].items[1].item }}</div>
                        <div class="iteminfo">
                            <div class="value" v-if="itemlists[(rownum - 1) * 3 + (itemindex - 1)].items[1].item=='告警'" style="color: red">{{ itemlists[(rownum - 1) * 3 + (itemindex - 1)].items[1].value }}</div>
                            <div class="value" v-else>{{ itemlists[(rownum - 1) * 3 + (itemindex - 1)].items[1].value }}</div>
                            <div class="unit" v-if="itemlists[(rownum - 1) * 3 + (itemindex - 1)].items[1].unit">{{ itemlists[(rownum - 1) * 3 + (itemindex - 1)].items[1].unit }}</div>
                        </div>
                    </div>
                </div>
                <div class="itemtype itemtype3" v-if="itemlists[(rownum - 1) * 3 + (itemindex - 1)] && itemlists[(rownum - 1) * 3 + (itemindex - 1)].items && itemlists[(rownum - 1) * 3 + (itemindex - 1)].items.length === 3">
                    <!-- <div class="title" :title="itemlists[(rownum - 1) * 3 + (itemindex - 1)].title">{{ itemlists[(rownum - 1) * 3 + (itemindex - 1)].title.replace(/传感器/, "") }}</div> -->
                    <div class="title" v-if="itemlists[(rownum - 1) * 3 + (itemindex - 1)].pop_type!=''" :title="itemlists[(rownum - 1) * 3 + (itemindex - 1)].title"><a href="javascript:;" @click="showPop(parseInt(itemlists[(rownum - 1) * 3 + (itemindex - 1)].pop_type),itemlists[(rownum - 1) * 3 + (itemindex - 1)].id)">{{ itemlists[(rownum - 1) * 3 + (itemindex - 1)].title.replace(/传感器/, "") }}</a></div>
                    <div class="title" v-else :title="itemlists[(rownum - 1) * 3 + (itemindex - 1)].title">{{ itemlists[(rownum - 1) * 3 + (itemindex - 1)].title.replace(/传感器/, "") }}</div>

                    <div class="rowline">
                        <div class="value">{{ itemlists[(rownum - 1) * 3 + (itemindex - 1)].items[0].value }}</div>
                        <div class="unit" v-if="itemlists[(rownum - 1) * 3 + (itemindex - 1)].items[0].unit">{{ itemlists[(rownum - 1) * 3 + (itemindex - 1)].items[0].unit }}</div>
                    </div>

                    <div class="rowline">
                        <div class="value">{{ itemlists[(rownum - 1) * 3 + (itemindex - 1)].items[1].value }}</div>
                        <div class="unit" v-if="itemlists[(rownum - 1) * 3 + (itemindex - 1)].items[1].unit">{{ itemlists[(rownum - 1) * 3 + (itemindex - 1)].items[1].unit }}</div>
                    </div>

                    <div class="rowline">
                        <div class="value">{{ itemlists[(rownum - 1) * 3 + (itemindex - 1)].items[2].value }}</div>
                        <div class="unit" v-if="itemlists[(rownum - 1) * 3 + (itemindex - 1)].items[2].unit">{{ itemlists[(rownum - 1) * 3 + (itemindex - 1)].items[2].unit }}</div>
                    </div>
                </div>

                <!-- {{ itemlists[(rownum - 1) * 3 + (itemindex - 1)] }} -->
            </div>
        </div>
    </div>
    <Pop :installReqStatus='installReqStatus' :warningReqStatus='warningReqStatus' :label1='label1' :label2='label2' :showTab='showTab' :warningSearch='warningSearch' :updateWarningAddress='updateWarningAddress' :installSearch='installSearch' :updateInstallAddress='updateInstallAddress' :warningPageEvent='warningPageEvent' :installPageEvent='installPageEvent' :list='list' :title='title' :installAddress='installAddress' :warningAddress='warningAddress' :reqStatus='reqStatus' :installPageIndex='installPageIndex' :warningPageIndex='warningPageIndex' :installList='installList' :installTotal='installTotal' :warningList='warningList' :warningTotal='warningTotal' />
</template>
<script lang="ts">
import { reactive, ref, watch, Ref, provide } from 'vue'
import '../font/bebas/bebas.css'
import Pop from './pop.vue'
import { debug } from 'console'
declare interface iteminfo {
    item: String
    value: String
    unit: String
}
declare interface itemlisttype {
    title: String
    items: Array<iteminfo>
}
export default {
    components: {
        Pop,
    },
    props: {
        itemlists: Array,
        getRegion: {
            type: Function,
            required: true,
        },
        getSensor: {
            type: Function,
            required: true,
        },
        showTab: {
            type: Boolean,
            default: true,
        },
        label1: {
            type: String,
            default: '今日',
        },
        label2: {
            type: String,
            default: '本周',
        },
    },
    setup(props) {
        // console.log('props.itemlists', props.itemlists)

        let itemlists: Ref<any> = ref([])
        if (itemlists.value) {
        }
        itemlists.value = props.itemlists

        let rownums = ref(1)
        let itemnumarr: any = reactive([])
        rownums.value = Math.ceil(itemlists.value.length / 3)

        for (let i = 0; i < rownums.value; i = i + 1) {
            itemnumarr[i] = itemlists.value.slice(i * 3, i * 3 + 3).length
        }

        watch(props, (newValue) => {
            itemlists.value = newValue.itemlists
            if (itemlists.value) {
                rownums.value = Math.ceil(itemlists.value.length / 3)
                itemnumarr.length = 0
                for (let i = 0; i < rownums.value; i = i + 1) {
                    itemnumarr[i] = itemlists.value.slice(
                        i * 3,
                        i * 3 + 3
                    ).length
                }
            }
        })

        // 显示弹窗方法
        let modalOpen = ref(false)
        let popType = ref(0)
        const list = ref([])
        const title = ref('')
        const reqId = ref(0)
        const reqStatus = ref('loading')

        const installList = ref([])
        const installTotal = ref(0)
        const installPageIndex = ref(1)
        const installAddress = ref('')
        const installReqStatus = ref('loading')

        const warningList = ref([])
        const warningTotal = ref(0)
        const warningPageIndex = ref(1)
        const warningAddress = ref('')
        const warningReqStatus = ref('loading')

        // 提供
        provide('modalOpen', modalOpen)
        provide('popType', popType)

        // 显示弹窗方法
        function showPop(pop_type: String, id: Number) {
            modalOpen.value = true
            popType.value = pop_type
            list.value = []
            title.value = ''
            reqId.value = id
            reqStatus.value = 'loading'

            installList.value = []
            installTotal.value = 0
            installAddress.value = ''
            installPageIndex.value = 1
            installReqStatus.value = 'loading'

            warningList.value = []
            warningTotal.value = 0
            warningAddress.value = ''
            warningPageIndex.value = 1
            warningReqStatus.value = 'loading'

            if (pop_type == '1' || pop_type == '2') {
                props.getRegion(reqId.value).then((lists) => {
                    list.value = lists.list
                    title.value = lists.title

                    if (lists.list.length > 0) {
                        reqStatus.value = 'finish'
                    } else {
                        reqStatus.value = 'empty'
                    }
                })
            } else if (pop_type == '3') {
                // 安装列表
                getInstallList()
                // 告警列表
                getWarningList()
            }
        }

        // 安装列表翻页方法
        const installPageEvent = (newPageIndex) => {
            installPageIndex.value = newPageIndex
            getInstallList()
        }

        // 告警列表翻页方法
        const warningPageEvent = (newPageIndex) => {
            warningPageIndex.value = newPageIndex
            getWarningList()
        }

        // 获取安装列表数据
        const getInstallList = () => {
            props
                .getSensor(
                    reqId.value,
                    installPageIndex.value,
                    1,
                    installAddress.value
                )
                .then((lists) => {
                    installList.value = lists.list
                    installTotal.value = lists.total
                    title.value = lists.title

                    if (lists.list.length > 0) {
                        installReqStatus.value = 'finish'
                    } else {
                        installReqStatus.value = 'empty'
                    }
                })
        }
        // 获取告警列表数据
        const getWarningList = () => {
            props
                .getSensor(
                    reqId.value,
                    warningPageIndex.value,
                    2,
                    warningAddress.value
                )
                .then((lists) => {
                    warningList.value = lists.list
                    warningTotal.value = lists.total

                    if (lists.list.length > 0) {
                        warningReqStatus.value = 'finish'
                    } else {
                        warningReqStatus.value = 'empty'
                    }
                })
        }

        // 修改安装列表的搜索条件-地址
        const updateInstallAddress = (newAddress: String) => {
            installAddress.value = newAddress
        }

        // 安装列表搜索方法
        const installSearch = () => {
            installPageIndex.value = 1
            getInstallList()
        }

        // 修改告警列表的搜索条件-地址
        const updateWarningAddress = (newAddress: String) => {
            warningAddress.value = newAddress
        }

        // 安装列表搜索方法
        const warningSearch = () => {
            warningPageIndex.value = 1
            getWarningList()
        }

        return {
            itemlists,
            rownums,
            itemnumarr,
            showPop,

            modalOpen,
            popType,
            list,
            title,
            reqStatus,

            installList,
            installTotal,
            installPageIndex,
            installAddress,
            installPageEvent,
            updateInstallAddress,
            installSearch,
            installReqStatus,

            warningList,
            warningTotal,
            warningPageIndex,
            warningAddress,
            warningPageEvent,
            updateWarningAddress,
            warningSearch,
            warningReqStatus,
        }
    },
}
</script>
<style lang="less" scoped>
.boxrow {
    height: 102px;
    /*border-bottom: 1px solid red;*/
    color: red;
    // display: flex;
}

.boxitem {
    // height: 100%;
    // flex: 1;
    float: left;
    height: 102px;
    width: 33%;
    border-bottom: 1px solid rgba(7, 48, 74, 0.87);
    border-left: 1px solid rgba(7, 48, 74, 0.87);
    &:last-child {
        border-right: 1px solid rgba(7, 48, 74, 0.87);
    }
    // border: 1px solid red;
    // display: block;
    text-overflow: ellipsis; //省略号
    overflow: hidden;
    // max-width: 90px;
    // -webkit-line-clamp: 1; //从第二行开始隐藏
    // -webkit-box-orient: vertical;
}

.itemtype {
    color: white;
    text-align: center;
    // white-space: nowrap;
}
.scroll-style {
    /*overflow: hidden;*/
    /*overflow-y: auto;*/
    /*&::-webkit-scrollbar{*/
    /*  width: 5px;*/
    /*  background-color: #093F62;*/
    /*}*/
}
.itemtype1 {
    .title {
        font-size: 16px;
        text-align: center;
        white-space: nowrap;
        margin: 20px auto 0;
        height: 25px;

        // display: -webkit-box;
        text-overflow: ellipsis; //省略号
        overflow: hidden;
        width: 130px;
        -webkit-line-clamp: 1; //从第二行开始隐藏
        -webkit-box-orient: vertical;

        a {
            color: white;
            text-decoration: none;
            padding-bottom: 2px;
            border-bottom: 1px solid #10f7ff;
        }
    }

    .rowline {
        // height: 26px;
        // line-height: 26px;

        .iteminfo {
            display: inline-block;
            margin-top: 4px;
            text-align: center;

            .value {
                color: #10f7ff;
                font-size: 18px;
                // line-height: 26px;
                float: left;
                font-family: 'bebas';
            }
            .unit {
                color: #10f7ff;
                // line-height: 32px;
                // height: 26px;
                margin-left: 5px;
                white-space: nowrap;
                position: relative;
                float: left;

                .unitinfo {
                    position: absolute;
                    height: 14px;
                    line-height: 14px;
                    font-size: 14px;
                    bottom: 0;
                }
            }
        }
    }
}

.itemtype2 {
    .title {
        font-size: 16px;
        margin: 10px auto 0;
        text-align: center;
        white-space: nowrap;
        height: 25px;

        // display: -webkit-box;
        text-overflow: ellipsis; //省略号
        overflow: hidden;
        width: 130px;
        -webkit-line-clamp: 1; //从第二行开始隐藏
        -webkit-box-orient: vertical;

        a {
            color: white;
            text-decoration: none;
            padding-bottom: 2px;
            border-bottom: 1px solid #10f7ff;
        }
    }

    .rowline {
        height: 16px;
        line-height: 16px;
        .itemt {
            float: left;
            font-size: 12px;
            margin-left: 26px;
            line-height: 16px;
            color: #c6e2fe;
        }

        .iteminfo {
            display: inline-block;
            line-height: 16px;
            color: #10f7ff;

            .value {
                float: left;
                font-size: 15px;
                font-family: 'bebas';
            }

            .unit {
                float: left;
                font-size: 12px;
                line-height: 22px;
                margin-left: 2px;
            }
        }
    }

    .line1,
    .line2 {
        margin-top: 10px;
    }
}

.today,
.week {
    font-size: 14px;
}
// .rowline {
//   text-align: center;
//   .value {
//     float: left;
//     color: #10f7ff;
//     font-size: 16px;
//     line-height: 16px;
//     margin-top: 1px;
//   }
//   .unit {
//     float: left;
//     color: #10f7ff;
//     font-size: 14px;
//     margin-left: 5px;
//     white-space: nowrap;
//   }
// }

.row {
    display: flex !important;
    justify-items: center;
    justify-content: center;
    align-items: center;
    align-content: center;
    .value {
        display: block;
        text-overflow: ellipsis; //省略号
        overflow: hidden;
        max-width: 90px;
        -webkit-line-clamp: 1; //从第二行开始隐藏
        -webkit-box-orient: vertical;
    }
}
</style>